<template>
  <div class="outer">
    <h1>List组件</h1>
    <button @click="sendData">向父组件传数据</button>
    <button @click="destroyList">卸载list组件</button>
  </div>
</template>

<script>
export default {
    name:"List",
    data(){
        return {
            List:[
                {name:'xiaowang',age:18},
                {name:'xiaoli',age:19},
                {name:'xiaoming',age:20},
            ]
        }
    },
    methods:{
        sendData(){
            this.$emit('atguigu',this.List)
        },
        destroyList(){
            this.$destroy()
        }
    },
    beforeDestroy(){
        this.$off('atguigu')
    }
}
</script>

<style scoped>
.outer{
    height: 200px;
    margin: 30px;
    background: pink;
}
</style>